<template>
    <rx-dialog @handOk="onSave" :oktext="this.$ti18('rxForm.saveBtn','保存')" btnalign="right" order="top" @cancel="cancel" :canceltext="this.$ti18('rxForm.closeBtn','关闭')">
        <div slot="toolbar">
            <a-button type="primary" @click="changeLength">
                {{showHistory?i18n('list.editPage','编辑页面代码'):$ti18('rxList.editHistory','历史记录')}}
            </a-button>
            <a-button type="primary" @click="onPreview">{{$ti18('rxList.previews','预览')}}</a-button>
        </div>
        <rx-layout>
            <div slot="center" class="mirrors">
                <a-tabs default-value="pcHtml" v-show="!showHistory" style="height:100%;">
                    <a-tab-pane forceRender key="pcHtml" :tab="i18n('list.computer','电脑端') + 'HTML'" style="height:100%;">
                        <div ref="codeBox" style="height:calc( 100% - 60px);width: 100%">
                            <rx-codemirror ref="listHtml"
                                           :height="'100%'"
                                           :mode="'sql'"
                                           v-model="mdl.listHtml"
                            ></rx-codemirror>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane forceRender key="mobileHtml" :tab="i18n('list.mobile','手机端') + 'HTML'">
                        <div ref="codeBox" style="height:calc( 100% - 60px);width: 100%">
                            <rx-codemirror ref="mobileHtml"
                                           :height="'100%'"
                                           :mode="'sql'"
                                           v-model="mdl.mobileHtml"
                            ></rx-codemirror>
                        </div>
                    </a-tab-pane>
                </a-tabs>
                <div style="height: 100%"  v-show="showHistory">
                  <rx-grid
                      ref="table"
                      :bordered="true"
                      :allowRowSelect="false"
                      :columns="columns"
                      :defaultPageSize="10"
                      url="/api-form/form/core/listHistory/query"
                      :queryParam="queryParam"
                      data-field="result.data"
                      :pageSizeOptions="['10', '30', '40']"
                      id-field="id"
                      :loadDataOnstart="false"
                  >
                     <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span @click.stop="check(record)">{{i18n('list.view','查看')}}</span>
                        <span @click.stop="modifyHtml(record.content,record.mobileContent)">{{i18n('list.fallback','回退')}}</span>
                          <span @click.stop="delByIds([record.id])">{{$ti18('rxList.delBtn','删除')}}</span>
                      </span>
                    </rx-grid>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxDialog, RxCodemirror, BaseForm,Util} from "@lowcode/jpaas-common-lib"
import FormBoListApi from "@/api/form/core/formBoList";
import CodemirrorView from "./codemirrorView";
import {openUrl} from "@/utils/util";

//require("codemirror/mode/vue/vue");
export default {
    name: "form-bo-list",
    mixins: [BaseForm],
    components: {
        RxDialog,
        RxCodemirror
    },
    props:["showModal","pkId","secondEdit"],
    data() {
        return {
            ListStartLength: '',
            queryParam:{"Q_LIST_ID__S_EQ":this.pkId},
            showHistory:false,
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 100,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {title: this.i18n('form.modifyTime','修改时间'), dataIndex: 'createTime', width: 150},
                {title: this.$ti18('rxForm.notes','备注'), dataIndex: 'remark', width: 100},
                {title: this.$ti18('rxList.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
            ],
        }
    },
    mounted() {

    },
    created() {
        this.codeMirror();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        codeMirror() {//在弹窗中引用codemirror会出现样式混乱，延时渲染就好了yx；
            var _this = this;
            this.$nextTick(function () {
                setTimeout(function () {
                    if (_this.$refs.listHtml) {
                        _this.$refs.listHtml.refresh();
                    }
                    if (_this.$refs.mobileHtml) {
                        _this.$refs.mobileHtml.refresh();
                    }
                }, 800)
            })
        },
        onload_(){

        },
        get(id) {
            return FormBoListApi.get(id);
        },
        onSave(vm) {
           this.showModal(this);
            vm.loading = false;
        },
        saveHtml(self,remark) {
            FormBoListApi.saveHtml({
                id: self.pkId,
                html: self.mdl.listHtml,
                mobileHtml:self.mdl.mobileHtml,
                remark:remark
            });
        },
        onPreview() {
            let appId=this.mdl.appId;
            let ctxPath= process.env.VUE_APP_CONTEXT_MAIN;
            let url=`${ctxPath}/list/${this.mdl.key}?appId=${appId}`;
            let title=this.mdl.name;
            openUrl({url:url,title:title,curVm:this,max:true});
        },
        modifyHtml(content,mobileContent,rollback) {
            var self=this;
            this.$confirm({
                title: this.$ti18('rxMsa.actionTips','操作提示'),
                content: this.i18n('rollback','您确定要回退选中的版本吗？'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:10000,
                onOk() {
                    self.mdl.listHtml = content;
                    self.mdl.mobileHtml = mobileContent;
                    self.showHistory=false;
                    if(rollback){
                        rollback();
                    }
                    FormBoListApi.saveHtml({
                        id: self.pkId,
                        html: self.mdl.listHtml,
                        mobileHtml:self.mdl.mobileHtml,
                        isLog:'NO'
                    });
                },
                onCancel() {}
            })
        },
        changeLength() {
            if(this.showHistory){
                this.showHistory=false;
                return;
            }
            this.$refs.table.loadData();
            this.showHistory=true;
        },
        //查看历史记录
        check(record){
            let self=this;
            let conf = {
                component: CodemirrorView,
                max:true,
                title:this.$ti18('rxList.editHistory','历史记录'),
                curVm: this,
                data:{
                    curHtml:self.mdl.listHtml,
                    oldHtml:record.content,
                    curMobileHtml:self.mdl.mobileHtml,
                    oldMobileHtml:record.mobileContent,
                    modifyHtml:self.modifyHtml
                }
            };
            Util.open(conf,function (action) {})
        },
        delByIds(ids){
            let self=this;
            if(ids.length>0){
                this.$confirm({
                    title: this.$ti18('rxMsa.actionTips','操作提示'),
                    content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                    zIndex:99999,
                    onOk() {
                        return FormBoListApi.delListHistory({ ids: ids.join(',') }).then(res=>{
                            self.$refs.table.loadData();
                        });
                    },
                    onCancel() {}
                })

            }
        }
    }
}
</script>

<style>
.CodeMirror-sizer{
  min-width:100% !important
}
</style>